<template>
  <div>
    <div style="margin-bottom: 10px">
      <span>用户数:{{totalForm.userCount}}&nbsp;&nbsp;&nbsp;</span>
      <span>积分数合计:{{totalForm.countCoin}}&nbsp;&nbsp;&nbsp;</span>
      <span>积分获取:{{totalForm.addCoin}}&nbsp;&nbsp;&nbsp;</span>
      <span>积分花费:{{totalForm.costCoin}}</span>
    </div>
    <el-form :inline="true" :model="searchForm" @keyup.enter.native="handleSearch()">
      <el-form-item>
        <el-input v-model="searchForm.username" placeholder="请输入用户昵称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.mobile" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.terminal" placeholder="请输入支付终端" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.mark" placeholder="请输入积分变化名目" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.type" placeholder="请选择积分变化类型" style="width: 180px" clearable>
          <el-option value="获得" label="获得"></el-option>
          <el-option value="花费" label="花费"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch()">查询</el-button>
        <el-button type="warning" @click="handleOperation('add')">后台添加</el-button>
        <el-button type="warning" @click="handleOperation('subtract')">后台扣除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      v-loading="dataLoading"
      element-loading-text="拼命加载中"
      border
      style="width: 100%;">
      <el-table-column
        prop="nickname"
        header-align="center"
        align="center"
        label="用户昵称">
      </el-table-column>
      <el-table-column
        prop="mobile"
        header-align="center"
        align="center"
        label="用户手机号">
      </el-table-column>
      <el-table-column
        prop="mark"
        header-align="center"
        align="center"
        label="积分变化名目">
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="积分变化类型">
      </el-table-column>
      <el-table-column
        prop="coin"
        header-align="center"
        align="center"
        label="积分数目">
      </el-table-column>
      <el-table-column
        prop="terminal"
        header-align="center"
        align="center"
        label="支付终端">
      </el-table-column>
      <el-table-column
        prop="channelName"
        header-align="center"
        align="center"
        label="平台">
      </el-table-column>
      <el-table-column
        prop="desc"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="发生时间">
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogOperate" :visible.sync="dialogFormVisible" :close-on-click-modal="isClose">
      <el-form :model="operateForm" :rules="rules" ref="operateForm">
        <!--<el-form-item label="积分变化名目" prop="name">-->
          <!--<el-input v-model="operateForm.name"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="操作对象手机号" prop="phone">
          <el-input v-model="operateForm.phone"></el-input>
        </el-form-item>
        <el-form-item :label="dialogLabel" prop="num">
          <el-input v-model="operateForm.num" placeholder="请输入正整数"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="operateForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOperate">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </div>
</template>
<script>
  export default {
    name:'list',
    data(){
      return{
        totalForm:{
          addCoin: '',
          costCoin: '',
          countCoin: '',
          userCount: '',
        },
        isClose:false,
        searchForm:{
          username:'',
          mobile:'',
          terminal:'',
          mark:'',
          type:'',
          dateRange:[]
        },
        dataLoading:false,
        addVisible:false,
        dataList:[],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dialogOperate:'',
        dialogFormVisible:false,
        dialogLabel:'',
        operateForm:{
          name:'',
          phone:'',
          num:'',
          remark:''
        },
        rules:{
          name:[
            { required: true, message: '请输入积分变化名目', trigger: 'blur' },
          ],
          phone:[
            { required: true, message: '请输入操作对象手机号', trigger: 'blur' },
          ],
          num:[
            { required: true, message: '请输入添加/扣除积分数量', trigger: 'blur' },
          ],
          remark:[
            { required: false },
          ]
        }
      }
    },
    mounted(){
      this.handleSearch();
    },
    methods:{
      //每页数
      sizeChangeHandle (val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.handleSearch();
      },
      //当前页
      currentChangeHandle (val) {
        this.pageIndex = val;
        this.handleSearch(val);
      },
      //获取数据
      handleSearch(val){
        this.dataLoading = true;
        val = val?val:1;
        this.$http({
          url: this.$http.adornUrl('/coin/coinDetail'),
          method: 'get',
          params: this.$http.adornParams({
            'page': val,
            'limit': this.pageSize,
            'username': this.searchForm.username,
            'mobile': this.searchForm.mobile,
            'mark': this.searchForm.mark,
            'type': this.searchForm.type,
            'terminal': this.searchForm.terminal,
            'startTime':(this.searchForm.dateRange&&this.searchForm.dateRange.length)?this.formatDataFn(this.searchForm.dateRange[0]):'',
            'endTime':(this.searchForm.dateRange&&this.searchForm.dateRange.length)?this.formatDataFn(this.searchForm.dateRange[1]):''
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data);
            this.dataLoading = false;
            this.dataList = data.page.records;
            this.totalPage = data.page.total;
            this.totalForm = {
              addCoin: data.coinDetailCount.addCoin,
              costCoin: data.coinDetailCount.costCoin,
              countCoin: data.coinDetailCount.countCoin,
              userCount: data.coinDetailCount.userCount,
            };
          }else {
            this.dataLoading = false;
            this.dataList = [];
          }
        });
      },

      //后台添加，扣除
      handleOperation(params){
        if(params == 'add'){
          this.dialogOperate = '后台添加';
          this.dialogFormVisible = true;
          this.dialogLabel = '添加积分数量';
        }else {
          this.dialogOperate = '后台扣除';
          this.dialogFormVisible = true;
          this.dialogLabel = '扣除积分数量';
        }
        this.$nextTick(()=>{
          this.$refs['operateForm'].resetFields();
        })
      },

      editOperate(){
        var re = /^[0-9]+$/;
        if(!re.test(this.operateForm.num)){
          this.$message.error('请输入正整数');
          return ;
        }
        if(this.operateForm.phone.length !== 11){
          this.$message.error('请输入正确的手机号');
          return ;
        }
        var type = this.dialogOperate == '后台添加'?1:2;
        this.$refs['operateForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/coin/updateCoin'),
              method: 'post',
              data: this.$http.adornData({
                "desc": this.operateForm.remark,
                // "mark": this.operateForm.name,
                "mobile": this.operateForm.phone,
                "num": this.operateForm.num,
                "type": type==1?1:0
              })
            }).then(({data}) => {
              console.log(data);
              if(data.code == 0){
                this.$message.success('操作成功~');
                this.dialogFormVisible = false;
                this.handleSearch();
              }else {
                this.$message.error(data.msg);
              }

            });
          } else {
            this.$message.warning('请填写完整~');
          }
        });
      },

      //格式化日期
      formatDataFn(s){
        let dat = new Date(s);
        let a = dat.getFullYear();
        let b = dat.getMonth()+1;
        let c = dat.getDate();
        let d = dat.getHours();
        let e = dat.getMinutes();
        let f = dat.getSeconds();

        return a+'-'+this.timeFn(b)+'-'+this.timeFn(c)+' '+this.timeFn(d)+':'+this.timeFn(e)+':'+this.timeFn(f);
      },
      timeFn(t){
        return t<10?'0'+t:t;
      },

      //置为过期
      handEditDel(params){
        this.$confirm('是否确认此操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/meet/updateStatus'),
            method: 'post',
            params: this.$http.adornParams({
              'id':params.id,
              'status':params.status === 1?0:1
            })
          }).then(({data}) => {
            console.log(data);
            if (data && data.code === 0) {
              this.$message({
                message: '设置成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.handleSearch(this.pageIndex);
                }
              })
            }else {
              this.$message({
                message: '设置失败，'+data.msg,
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.handleSearch(this.pageIndex);
                }
              })
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      //查看图片
      handleViewPicture(src){
        this.$nextTick(() => {
          this.$refs.viewPicture.imgSrc = src;
          this.$refs.viewPicture.visible = true
        })
      }
    }
  }
</script>
<style scoped>

</style>
